<script setup lang="ts">
defineOptions({
  name: 'Contextmenu',
});
const emits = defineEmits(['command']);
const onCommand = (command: string) => {
  emits('command', command);
};
</script>
<template>
  <div class="contextmenu">
    <div class="contextmenu-item" @click="onCommand('reload')">刷新</div>
    <div class="contextmenu-item" @click="onCommand('newFolder')">
      新建文件夹...
    </div>
    <hr />
    <div class="contextmenu-item" @click="onCommand('move')">移动到...</div>
    <hr />
    <div class="contextmenu-item" @click="onCommand('delete')">删除...</div>
    <div class="contextmenu-item" @click="onCommand('rename')">重命名...</div>
  </div>
</template>
<style lang="scss" scoped>
.contextmenu {
  position: absolute;
  z-index: 100;
  width: 200px;
  padding: 2px 0;
  font-size: 14px;
  text-align: left;
  text-shadow: none;
  background: var(--wos-box-right-bg);
  border-radius: var(--radius);
  box-shadow: 0 0 10px rgb(0 0 0 / 30%);

  hr {
    border: none;
    border-top: 1px solid var(--wos-border-color);
  }

  &-item {
    display: flex;
    align-items: center;
    padding: 0 12px;
    margin: 3px 5px;
    overflow: hidden;
    font-size: 13px !important;
    line-height: 2;
    color: var(--el-text-color-regular);
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    border-radius: var(--radius);

    &:hover {
      color: white;
      background: #4b9efb;
      border-radius: var(--radius);
    }
  }
}
</style>
